import React,{ Component } from 'react';
import './Sort.scss';
import UserOne from 'components/widget/index/UserOne';

export default class Sort extends Component{
	constructor (props) {
		super(props)
		this.state={
			nowTypeList: [
				{ name: '按客户人数', type: 1 },
				{ name: '按互动频率', type: 2 },
				{ name: '按成交率区间', type: 3 }
			],
			userTypeList: [
				'',
				[
					{ name: '客户总数', type: 1 },
					{ name: '新增客户', type: 2 }
				],
				[
					{ name: '跟进总数', type: 1 },
					{ name: '咨询总数', type: 2 }
				],
				[
					{ name: '1~50%', type: 1 },
					{ name: '51~80%', type: 2 },
					{ name: '81~99%', type: 3 },
					{ name: '100%', type: 4 }
				]
			],
			timeState: [
				{ name: '汇总', type: 1 },
				{ name: '昨日', type: 2 },
				{ name: '近7天', type: 3 },
				{ name: '近30天', type: 4 }
			],
			nowType: 1,
			userType: 1,
			sortTime: 1,
			sortList: []
		}
	}
	changeNowType (index) {
		this.setState({
			nowType: index,
			userType: 1,
			sortTime: 1
		}, () => {
			this.props.changeParams({
				sortTap: index,
				sortState: 1,
				sortTime: 1,
			})
		})
	}
	changeTimeType (index) {
		this.setState({
			sortTime: index
		}, () => {
			this.props.changeParams({
				sortTime: index
			})
		})
	}
	changeUserType (index) {
		this.setState({
			userType: index,
			sortTime: 1
		}, () => {
			this.props.changeParams({sortTime: 1, sortState: index})
		})
	}
	render() {
		return (
			<div className="sort-group">
				<div className="switch-tap">
					{
						this.state.nowTypeList.map((item, index) => {
							return (
								<div  onClick={this.changeNowType.bind(this, item.type)} className={item.type === this.state.nowType ? 'active' : ''} key={index}>{item.name}</div>
							)
						})
					}
				</div>
				<div className="special-switch-tap">
					{
						this.state.userTypeList[this.state.nowType].map((item, index) => {
							return (
								<div  onClick={this.changeUserType.bind(this, item.type)} className={item.type === this.state.userType ? 'active' : ''} key={index}>{item.name}</div>
							)
						})
					}
				</div>
				<div className={(this.state.nowType === 1 && this.state.userType === 2) || (this.state.nowType === 2) ? 'switch-tap' : 'switch-tap hidden'}>
					{
						this.state.timeState.map((item, index) => {
							return (
								<div  onClick={this.changeTimeType.bind(this, item.type)} className={item.type === this.state.sortTime ? 'active' : ''} key={index}>{item.name}</div>
							)
						})
					}
				</div>
				<div className="sort-list">
					{
						this.props.data.map((item, index) => {
							return (
								<UserOne data={item} index={index} key={index} />
							)
						})
					}
				</div>
			</div>
		)
	}
}